@page
@{ Layout = "_LayoutHome"; }
<el-card>
    <el-row :gutter="5">
        <el-col :span="7" style="text-align:center;">
            <div class="card rounded-4 card-bordered card-lift border-muted border-1">
                <div class="d-flex flex-column gap-3">
                    <div class="bg-cover rounded-0 p-8 z-1 rounded-top-4" :style="{'background-image':'url('+(user.avatarbgUrl || DEFAULT_AVATAR_BG_URL)+')'}">
                        <div class="py-8"></div>
                        <div class="py-5"></div>
                    </div>
                    <div class="mt-n8 z-2">
                        <img :src="user.avatarUrl || DEFAULT_AVATAR_URL" class="img-fluid rounded-pill smooth-shadow-lg avatar-xxl bg-light p-2">
                    </div>
                    <div class="d-flex flex-column gap-4 p-3 pb-4">
                        <div class="d-flex flex-column gap-2">
                            <div class="fs-3">
                                <i class="el-icon-s-custom me-2"></i>{{ user.displayName }}
                            </div>
                            <div>
                                欢迎回来
                            </div>
                        </div>
                        <div>
                            <el-button icon="el-icon-view" type="primary" circle v-on:click="btnUserMenuClick('profileView')"></el-button>
                            <el-button icon="el-icon-edit" circle v-on:click="btnUserMenuClick('profile')"></el-button>
                            <el-button icon="el-icon-key" circle v-on:click="btnUserMenuClick('password')"></el-button>
                            <el-button icon="el-icon-switch-button" type="warning" circle v-on:click="btnUserMenuClick('logout')"></el-button>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="17">
            <el-scrollbar class="scrollbar" :style="{ height: ($(window).height()-63) + 'px' }">
                <div class="mb-3 px-3">
                    <div class="row gy-4">
                        <div class="col-xl-4 col-lg-4 col-md-4 col-4">
                            <div class="card rounded-4 bg-white border-start-0 border-end-0 border-bottom-0 border-5 border-success card-hover-with-icon" v-on:click="btnMoreMenuClick('studyPlan')">
                                <div class="card-body">
                                    <div class="icon-shape icon-lg rounded-circle bg-success text-white mb-3  card-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-activity" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"></path>
                                        </svg>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div>
                                            <h4 class="mb-0">培训学分</h4>
                                            <p class="mb-0 ">
                                                <span class="text-success">{{ studyPlanTotalOverCredit }}</span>
                                                <span class="vr mx-2 text-gray-200"></span>
                                                <span class="text-warning">{{ studyPlanTotalCredit }}</span>
                                            </p>
                                        </div>
                                        <a href="#" class="text-inherit">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                                <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-4 col-md-4 col-4">
                            <div class="card rounded-4 bg-white border-start-0 border-end-0 border-bottom-0 border-5 border-warning card-hover-with-icon" v-on:click="btnMoreMenuClick('studyCourse')">
                                <div class="card-body">
                                    <div class="icon-shape icon-lg rounded-circle bg-warning text-white  mb-3  card-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">
                                            <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
                                            <path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"></path>
                                        </svg>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div>
                                            <h4 class="mb-0">完成课程</h4>
                                            <p class="mb-0 ">
                                                <span class="text-success">{{ totalOverCourse }}</span>
                                                <span class="vr mx-2 text-gray-200"></span>
                                                <span class="text-warning">{{ totalCourse }}</span>
                                            </p>
                                        </div>
                                        <a href="#" class="text-inherit">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                                <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-4 col-md-4 col-4">
                            <div class="card rounded-4 bg-white border-start-0 border-end-0 border-bottom-0 border-5 border-primary card-hover-with-icon" v-on:click="btnMoreMenuClick('studyCourse')">
                                <div class="card-body">
                                    <div class="icon-shape icon-lg rounded-circle bg-primary text-white  mb-3  card-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-code-slash" viewBox="0 0 16 16">
                                            <path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"></path>
                                        </svg>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div>
                                            <h4 class="mb-0">累计学习时长</h4>
                                            <p class="mb-0 ">
                                                <span class="text-success">{{ utils.formatDurationCN(totalDuration) }}</span>
                                            </p>
                                        </div>
                                        <a href="#" class="text-inherit">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                                <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="card p-3 rounded-3 bg-light">
                            <div class="row g-3">
                                <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                                    <div class="card card-lift">
                                        <div class="d-flex justify-content-between align-items-center p-3">
                                            <div>
                                                <el-progress type="dashboard" :percentage="examPercent" color="#5cb87a" :width="60" :stroke-width="4"></el-progress>
                                            </div>
                                            <div class="ms-3">
                                                <h4 class="mb-1">
                                                    <span>累计考试<span class="mx-2 text-success fs-4">{{ examTotal }}</span>场</span>
                                                </h4>
                                                <p class="mb-0 fs-6">
                                                    <span>及格率<span class="ms-2 text-success fs-4">{{ examPercent }}<span class="fs-6 fw-light ms-1">%</span></span></span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card card-lift mt-3">
                                        <div class="d-flex justify-content-between align-items-center p-3">
                                            <div>
                                                <el-progress type="dashboard" :percentage="examMoniPercent" color="#5cb87a" :width="60" :stroke-width="4"></el-progress>
                                            </div>
                                            <div class="ms-3">
                                                <h4 class="mb-1">
                                                    <span>累计模拟自测<span class="mx-2 text-success fs-4">{{ examMoniTotal }}</span>场</span>
                                                </h4>
                                                <p class="mb-0 fs-6">
                                                    <span>及格率<span class="ms-2 text-success fs-4">{{ examMoniPercent }}<span class="fs-6 fw-light ms-1">%</span></span></span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card card-lift mt-3">
                                        <div class="d-flex justify-content-between align-items-center p-3">
                                            <div>
                                                <el-progress type="dashboard" :percentage="practiceAnswerPercent" color="#5cb87a" :width="60" :stroke-width="4"></el-progress>
                                            </div>
                                            <div class="ms-3">
                                                <h4 class="mb-1">
                                                    <span>累计刷题<span class="mx-2 text-success fs-4">{{ practiceAnswerTmTotal }}</span>道</span>
                                                </h4>
                                                <p class="mb-0 fs-6">
                                                    <span>正确率<span class="ms-2 text-success fs-4">{{ practiceAnswerPercent }}<span class="fs-6 fw-light ms-1">%</span></span></span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                                    <apexchart type="radialBar" :options="passChartOptions" :series="passSeries" height="335"></apexchart>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="mt-3">
                        <div class="card card-hover-with-icon border-top border-3">
                            <div class="card-body">
                                <h5 class="card-title d-flex justify-content-between align-items-center">
                                    <span><i class="bi bi-box-fill me-2 card-icon text-warning p-1"></i>最新学习任务</span>
                                    <el-link :underline="false" v-on:click="btnMoreMenuClick('studyPlan')">更多<i class="el-icon-more ms-2"></i></el-link>
                                </h5>
                                <div class="mt-5">
                                    <div class="card card-hover position-relative p-3 px-4 bg-light" v-if="studyPlan && studyPlan.id>0" style="cursor:pointer;" v-on:click="studyPlan.isStudy ? btnViewPlanClick(studyPlan.id) : utils.error('计划不在有效期内')">
                                        <div class="position-absolute top-50 end-0 translate-middle-y pe-3">
                                            <img width="88" src="/sitefiles/assets/images/status/weikaishi.png" v-if="studyPlan.state==='Weikaishi'" />
                                            <img width="88" src="/sitefiles/assets/images/status/xuexizhong.png" v-if="studyPlan.state==='Xuexizhong'" />
                                            <img width="88" src="/sitefiles/assets/images/status/yidabiao.png" v-if="studyPlan.state==='Yidabiao'" />
                                            <img width="88" src="/sitefiles/assets/images/status/weidabiao.png" v-if="studyPlan.state==='Weidabiao'" />
                                            <img width="88" src="/sitefiles/assets/images/status/yiwancheng.png" v-if="studyPlan.state==='Yiwancheng'" />
                                        </div>
                                        <div class="row ps-2">
                                            <div class="col-4 col-md-4 col-xl-4 col-lg-4 bg-cover rounded" :style="{'background-image':'url('+studyPlan.plan.coverImg+')'}"></div>
                                            <div class="col-8 col-md-8 col-xl-8 col-lg-8">
                                                <div class="card-body">
                                                    <h3 class="mb-2"><a href="javascript:;" class="text-inherit">{{ studyPlan.plan.planName }}</a></h3>
                                                    <ul class="mb-2 list-inline">
                                                        <li class="list-inline-item">
                                                            <span class="fw-light fs-5">计划年度：</span><span class="fw-bold text-warning">{{ studyPlan.plan.planYear }}</span>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <span class="fw-light fs-5">计划学分：</span><span class="fw-bold text-success">{{ studyPlan.totalCredit }}</span>/<span class="fw-light fs-5">{{ studyPlan.plan.planCredit }}</span>
                                                        </li>
                                                    </ul>
                                                    <ul class="mb-5 list-inline">
                                                        <li class="list-inline-item">
                                                            <span class="fw-light fs-5">必修课：</span><span class="fw-bold text-success">{{ studyPlan.overCourseTotal }}</span>/<span class="fw-light fs-5">{{ studyPlan.plan.totalCount }}</span>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <span class="fw-light fs-5">选修课：</span><span class="fw-bold text-success">{{ studyPlan.overSelectCourseTotal }}</span>/<span class="fw-light fs-5">{{ studyPlan.plan.selectTotalCount }}</span>
                                                        </li>
                                                    </ul>
                                                    <div class="row align-items-center g-0">
                                                        <div class="col-auto">
                                                            <i class="bi bi-calendar-range text-warning"></i>
                                                        </div>
                                                        <div class="col ms-2">
                                                            <span>{{ studyPlan.plan.planBeginDateTimeStr }} -  {{ studyPlan.plan.planEndDateTimeStr }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-else>
                                        <el-empty image="/sitefiles/assets/images/nodata.svg" image-size="88" description="暂无学习任务"></el-empty>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="card card-hover-with-icon border-top border-3">
                            <div class="card-body">
                                <h5 class="card-title d-flex justify-content-between align-items-center">
                                    <span><i class="bi bi-box-fill me-2 card-icon text-warning p-1"></i>新上课程</span>
                                    <el-link :underline="false" v-on:click="btnMoreMenuClick('studyCourse')">更多<i class="el-icon-more ms-2"></i></el-link>
                                </h5>
                                <div class="mt-5">
                                    <div class="row" v-if="courseList && courseList.length>0">
                                        <div class="col-xl-4 col-lg-4 col-md-4 col-4" v-for="course in courseList">
                                            <div class="card card-lift card-hover border bg-white p-2" v-on:click="btnViewCourseClick(course)" style="cursor:pointer;">
                                                <div class="position-relative">
                                                    <img :src="course.coverImg" class="img-fluid card-img">
                                                    <span class="px-2 rounded-3 bg-dark text-white position-absolute bottom-0 end-0 m-2 fs-6">{{ utils.formatDuration(course.duration) }}</span>
                                                    <el-tag size="mini" type="success" effect="dark" class="position-absolute top-0 end-0 m-2" v-if="course.state==='Yiwancheng'">{{ course.stateStr }}</el-tag>
                                                    <el-tag size="mini" type="warning" effect="dark" class="position-absolute top-0 end-0 m-2" v-else>{{ course.stateStr }}</el-tag>
                                                    <span class="position-absolute bottom-0 start-0 m-2">
                                                        <el-tag size="mini" type="primary" effect="dark" class="me-1">{{ course.courseType}}</el-tag>
                                                        <el-tag size="mini" type="primary" effect="plain" v-if="course.offLine">面授课</el-tag>
                                                    </span>
                                                </div>
                                                <div class="card-body">
                                                    <h4 class="mb-3">
                                                        <a href="javascript:;" class="text-inherit">{{ course.name }}</a>
                                                    </h4>
                                                    <div class="mb-3 lh-1">
                                                        <span>
                                                            <i class="bi bi-star-fill text-warning me-2"></i>
                                                            <span class="text-inherit fw-semibold">{{ course.evaluationAvg }}</span>
                                                        </span>
                                                        <span class="mx-1">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                                 fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
                                                                <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
                                                            </svg>
                                                        </span>
                                                        <span>
                                                            <i class="bi bi-person-video3 me-2"></i>
                                                            <span class="text-inherit fw-semibold">{{ course.totaEvaluationlUser }}</span>
                                                        </span>
                                                    </div>
                                                    <div class="lh-1">
                                                        <i class="bi bi-credit-card-2-front-fill me-2"></i><span class="text-inherit fw-semibold">{{ course.studyHour }}</span> 课时
                                                        <span class="mx-1">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                                 fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
                                                                <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
                                                            </svg>
                                                        </span>
                                                        <span class="text-inherit fw-semibold text-success" v-if="course.state==='Yiwancheng'">{{ course.credit }}学分</span>
                                                        <span class="text-inherit fw-semibold" v-else>{{ course.credit }}学分</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-else>
                                        <el-empty image="/sitefiles/assets/images/nodata.svg" image-size="88" description="暂无课程上架"></el-empty>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="px-3 pb-5">
                    <div class="mb-3">
                        <el-card shadow="hover">
                            <div slot="header" class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold"><i class="el-icon-platform-eleme me-2 text-warning bg-light p-2 card-icon rounded-circle"></i>最近一场考试安排</span>
                                <el-link :underline="false" v-on:click="btnMoreMenuClick('examPaper')">更多<i class="el-icon-more ms-2"></i></el-link>
                            </div>
                            <div class="row align-items-center g-3" v-if="examPaper">
                                <div class="col-auto">
                                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="13" y="10" width="28" height="34" fill="none" stroke="#333" stroke-width="1" stroke-linejoin="miter" /><path d="M35 10V4H8C7.44772 4 7 4.44772 7 5V38H13" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="miter" /><path d="M21 22H33" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="miter" /><path d="M21 30H33" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="miter" /></svg>
                                </div>
                                <div class="col">
                                    <div class="mb-2">
                                        <el-link :underline="false" v-on:click="btnViewPaperClick(examPaper)">
                                            <span class="fw-bold">{{ examPaper.title }}</span>
                                        </el-link>
                                    </div>
                                    <ul class="list-inline fw-light">
                                        <li class="list-inline-item fs-5">
                                            总分：{{ examPaper.totalScore }}
                                        </li>
                                        <li class="list-inline-item fs-5">
                                            及格分：{{ examPaper.passScore }}
                                        </li>
                                        <li class="list-inline-item fs-5">
                                            剩余考试次数：
                                            <span class="fs-3 text-success fw-bold" v-if="(examPaper.userExamTimes-examPaper.myExamTimes)>0">
                                                {{ examPaper.userExamTimes-examPaper.myExamTimes }}
                                            </span>
                                            <span class="fs-3 text-danger fw-bold" v-else>
                                                0
                                            </span>
                                            /{{ examPaper.userExamTimes }}
                                        </li>
                                    </ul>
                                    <ul class="list-inline fw-light">
                                        <li class="list-inline-item fs-5">
                                            <i class="el-icon-date me-2"></i>开考时间：{{ examPaper.examStartDateTimeStr }}
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-auto">
                                    <div class="bg-light p-2 rounded-pill">
                                        <el-button type="primary" plain icon="el-icon-s-order" class="rounded-pill" v-on:click="btnViewPaperClick(examPaper)">详 细</el-button>
                                    </div>
                                </div>
                            </div>
                            <div v-else>
                                <el-empty image="/sitefiles/assets/images/nodata.svg" image-size="88" description="暂无考试安排"></el-empty>
                            </div>
                        </el-card>
                    </div>
                    <el-card shadow="hover" class="mb-3">
                        <div slot="header" class="d-flex justify-content-between align-items-center">
                            <span class="fw-bold">
                                <i class="el-icon-s-order me-2 text-warning bg-light p-2 card-icon rounded-circle"></i>刷题练习
                            </span>
                            <el-link :underline="false" v-on:click="btnMoreMenuClick('examPractice')">更多<i class="el-icon-more ms-2"></i></el-link>
                        </div>
                        <div>
                            <div class="row text-center">
                                <div class="col p-3">
                                    <div class="mb-3">
                                        <el-progress type="dashboard" :percentage="practiceAllPercent" color="#5cb87a" :width="88" :stroke-width="4"></el-progress>
                                        <div class="fs-6">正确率</div>
                                    </div>
                                    <div class="mb-3 p-2 bg-light w-100 rounded-pill">
                                        <el-button type="warning" plain class="py-4 w-100 rounded-pill" v-on:click="btnCreatePracticeClick('All')"><i class="bi bi-fast-forward-circle-fill me-2"></i>快速开始</el-button>
                                    </div>
                                    <div class="fs-6 fw-light">共<span class="fs-4 fw-bold mx-2">{{ practiceAllTmTotal }}</span>道题</div>
                                </div>
                                <div class="col p-3">
                                    <div class="mb-3">
                                        <el-progress type="dashboard" :percentage="practiceCollectPercent" color="#5cb87a" :width="88" :stroke-width="4"></el-progress>
                                        <div class="fs-6">正确率</div>
                                    </div>
                                    <div class="mb-3 p-2 bg-light w-100 rounded-pill">
                                        <el-button type="primary" plain class="py-4 w-100 rounded-pill" v-on:click="btnCreatePracticeClick('Collect')"><i class="bi bi-person-hearts me-2"></i>收藏练习</el-button>
                                    </div>
                                    <div class="fs-6 fw-light">共<span class="fs-4 fw-bold mx-2">{{ practiceCollectTmTotal }}</span>道题</div>
                                </div>
                                <div class="col p-3">
                                    <div class="mb-3">
                                        <el-progress type="dashboard" :percentage="practiceWrongPercent" color="#5cb87a" :width="88" :stroke-width="4"></el-progress>
                                        <div class="fs-6">正确率</div>
                                    </div>
                                    <div class="mb-3 p-2 bg-light w-100 rounded-pill">
                                        <el-button type="success" plain class="py-4 w-100 rounded-pill" v-on:click="btnCreatePracticeClick('Wrong')"><i class="bi bi-backspace-reverse me-2"></i>错题练习</el-button>
                                    </div>
                                    <div class="fs-6 fw-light">共<span class="fs-4 fw-bold mx-2">{{ practiceWrongTmTotal }}</span>道题</div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                    <div class="mb-3">
                        <el-card shadow="hover">
                            <div slot="header" class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold"><i class="el-icon-eleme me-2 text-warning bg-light p-2 card-icon rounded-circle"></i>最新一场模拟自测</span>
                                <el-link :underline="false" v-on:click="btnMoreMenuClick('examPaperMoni')">更多<i class="el-icon-more ms-2"></i></el-link>
                            </div>
                            <div class="row align-items-center g-3" v-if="examMoni">
                                <div class="col-auto">
                                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="13" y="10" width="28" height="34" fill="none" stroke="#333" stroke-width="1" stroke-linejoin="miter" /><path d="M35 10V4H8C7.44772 4 7 4.44772 7 5V38H13" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="miter" /><path d="M21 22H33" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="miter" /><path d="M21 30H33" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="miter" /></svg>
                                </div>
                                <div class="col">
                                    <div class="mb-2">
                                        <el-link :underline="false" v-on:click="btnViewPaperClick(examMoni)">
                                            <span class="fw-bold">{{ examMoni.title }}</span>
                                        </el-link>
                                    </div>
                                    <ul class="list-inline fw-light">
                                        <li class="list-inline-item fs-5">
                                            总分：{{ examMoni.totalScore }}
                                        </li>
                                        <li class="list-inline-item fs-5">
                                            及格分：{{ examMoni.passScore }}
                                        </li>
                                        <li class="list-inline-item fs-5">
                                            剩余考试次数：
                                            <span class="fs-3 text-success fw-bold" v-if="(examMoni.userExamTimes-examMoni.myExamTimes)>0">
                                                {{ examMoni.userExamTimes-examMoni.myExamTimes }}
                                            </span>
                                            <span class="fs-3 text-danger fw-bold" v-else>
                                                0
                                            </span>
                                            /{{ examMoni.userExamTimes }}
                                        </li>
                                    </ul>
                                    <ul class="list-inline fw-light">
                                        <li class="list-inline-item fs-5">
                                            <i class="el-icon-date me-2"></i>有效期：{{ examMoni.examStartDateTimeStr }}-{{ examMoni.examEndDateTimeStr }}
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-auto">
                                    <div class="bg-light p-2 rounded-pill">
                                        <el-button type="primary" plain icon="el-icon-s-order" class="rounded-pill" v-on:click="btnViewPaperClick(examMoni)">详 细</el-button>
                                    </div>
                                </div>
                            </div>
                            <div v-else>
                                <el-empty image="/sitefiles/assets/images/nodata.svg" image-size="88" description="暂无练习数据"></el-empty>
                            </div>
                        </el-card>
                    </div>
                    <div>
                        <div class="card card-hover-with-icon border-top border-3">
                            <div class="card-body">
                                <h5 class="card-title d-flex justify-content-between align-items-center">
                                    <span><i class="bi bi-award-fill me-2 card-icon text-warning p-2"></i>最新获得证书</span>
                                    <el-link :underline="false" v-on:click="btnMoreMenuClick('examPaperCer')">更多<i class="el-icon-more ms-2"></i></el-link>
                                </h5>
                                <div class="mt-4">
                                    <div class="card card-hover" v-if="topCer && topCer.id>0" v-on:click="btnViewCer(topCer)" style="cursor:pointer;">
                                        <div class="row g-0">
                                            <img :src="topCer.cerImg" class="w-100">
                                        </div>
                                    </div>
                                    <div v-else>
                                        <el-empty image="/sitefiles/assets/images/nodata.svg" image-size="88" description="暂无证书"></el-empty>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </el-col>
    </el-row>
</el-card>

@section Scripts{
    <script src="/sitefiles/assets/lib/apexcharts/apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/lib/apexcharts/vue-apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/js/home/dashboard.js" type="text/javascript"></script>
}